<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <h3>age: {{ age }}</h3>
  <button @click="obj.age++">点击大一岁</button>
  <button @click="age += 2">点击大两岁</button>
</template>

<script>
/* 
  目标：toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
*/
import { reactive, toRef } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: '法外狂徒张三',
      age: 18,
    })

    // 💥 这种写法是直接获取到了值 18，取值成功后和原来的 obj 响应式对象失去了关联
    // const age = obj.age
    // 🔔 toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
    const age = toRef(obj, 'age')
    console.log(age) // ObjectRefImpl，单独的响应式数据
    console.log(age._object === obj) // true，obj.age 值有变化 age 变量的值也会变化

    return { obj, age }
  },
}
</script>

<style></style>
